'use strict'
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'

import Header from './Common/Header'
import Footer from './Common/Footer'
import {
    urlKey
} from '../Tools'

import '../scss/card.scss'
//import '../scss/paystatus.scss'

//import imgList0 from '../Img/card/0.jpg'
//import imgList1 from '../Img/card/1.jpg'
//import imgList2 from '../Img/card/2.jpg'
//import imgList3 from '../Img/card/3.jpg'
//import imgList4 from '../Img/card/4.jpg'
//import imgList5 from '../Img/card/5.jpg'
//import imgList6 from '../Img/card/6.jpg'
//import imgList7 from '../Img/card/7.jpg'
//import imgList8 from '../Img/card/8.jpg'
//import imgList9 from '../Img/card/9.png'
import imgBanner from '../Img/card/banner.png'
//import imgIntro from '../Img/card/fun.png'

export default class Card extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            type: 0,
            tip: '限已订购和教育的老用户办理'
        }
    }

    componentWillMount() {
        let type = urlKey('type')
        if (type.indexOf('#')) {
            type = type.split('#')[0]
        }
        sessionStorage.type = type
        if (!sessionStorage.index || type)
            sessionStorage.index = 0
        this.setState({
            type,
            index: sessionStorage.index
        })
        console.log(type);
    }

    //选择套餐
    sltPackage(index) {
        sessionStorage.index = index
        //const tips = ['限已订购和教育的老用户办理', '限新和教育用户办理', '新老用户均可办理']
        this.setState({
            index
        })
    }

    render() {
        const {
            index,
            type
        } = this.state
        return (
            <div className='fnlist' style={{paddingTop:0}}>
                {/*<Header title='产品介绍' hideBack='true'/>*/}
                <div className='fntop text-center'>
                    <img src={imgBanner}/>
                </div>
                <div className='packagetitle'>
                    <h5>选择智能学生证套餐：</h5>
                    {type==1||type==2?
                    <ul className='sltlist clearfix'>
                        <li className='active'>套餐: 365元/年</li>
                    </ul>:
                    <ul className='sltlist clearfix'>
                        <li onClick={this.sltPackage.bind(this,0)} className={index==0?'active':''}>套餐一: 338元/年（限和教育老用户办理）</li>
                        <li onClick={this.sltPackage.bind(this,1)} className={index==1?'active':''}>套餐二: 365元/年（限和教育新用户办理）</li>
                        <li onClick={this.sltPackage.bind(this,2)} className={index==2?'active':''}>套餐三: 408元/年</li>
                    </ul>
                }
                </div>
                <div className='fnintro'>
                    <div className='item' id='cardlist'>
                        <p>套餐{type==1||type==2?'':<span>{index==0?'一':'二'}</span>}包含内容：</p>
                        {type==1||type==2?'':<p className='br'>{['限已订购和教育的老用户办理', '限新和教育用户办理', '新老用户均可办理'][index]}</p>}
                        <p className='br'>价值398元的智能学生证</p>
                        <p className='br'>价值360元的安全套餐（含每月200分钟通话，30M流量）</p>
                        <p className='br'>全年的中国即时定位服务</p>
                        {index==1||type==2?<p className='br'>全年和教育套餐</p>:''}
                        {type==1||(!type&&index==0)?'':<p className='br song'>{index==1||type==2?'12000分钟V网通语音+600M全网流量':'全年成长帮手（与全国权威教育专家在线交流孩子成长教育）'}</p>}
                    </div>
                    {type==1||(!type&&index==0)?'':
                    <div className='item'>
                        <p  className='slttip'>温馨提示：家长提供的手机号必须是大重庆范围内中国移动号；联通、电信及外地手机号无法完成绑定。</p>
                    </div>}
                </div>
                <Footer>
                    <div className='sltview'>已选择<span>套餐{type==1||type==2?'':<i>{['一','二','三'][index]}</i>}：{type==1||type==2?365:[338,365,408][index]}元/年</span></div>
                    <Link to={'/buy'} className='buybtn'>立即购买</Link>
                </Footer>
            </div>
        )
    }
}
